<template>
  <div id="search_input">
    <el-input v-model="searchStr"
              @change="handleSelect"
              @input="valueChange"
              prefix-icon="el-icon-search"
              placeholder="请输入歌曲/歌手/专辑"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchStr: this.$store.state.search,
    }
  },
  mounted() {},
  methods: {
    handleSelect() {
      this.$store.commit('SET_SEARCH', this.searchStr)
      this.$router.push('/searchSong?search=' + this.searchStr)
    },
    valueChange() {
      if (this.searchStr.trim() === '') {
        this.$router.push('/home').then(() => {
          this.$router.push('/home')
        })
      }
    },
  },
}
</script>

<style>
/* 手机样式 */
@media (max-width: 767px) {
  #search_input {
    width: 300px;
  }
}

/* 电脑样式 */
@media (min-width: 1024px) {
  #search_input {
    width: 600px;
  }
}

/* 平板样式 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 平板样式规则 */
}
</style>
